<h5 class="mb-3">课程预约</h5>

<div class="mb-4">
  <ul class="nav nav-tabs" id="scheduleTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="week-tab" data-bs-toggle="tab" data-bs-target="#week" type="button">本周</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="month-tab" data-bs-toggle="tab" data-bs-target="#month" type="button">本月</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="private-tab" data-bs-toggle="tab" data-bs-target="#private" type="button">私教预约</button>
    </li>
  </ul>

  <div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="week" role="tabpanel">
      <div class="schedule-day">
        <h6 class="text-primary">周一 · 5月15日</h6>
        <div class="class-slot">
          <div class="d-flex justify-content-between">
            <div>
              <strong>核心普拉提</strong>
              <div class="text-muted small">09:00-09:45 · 张教练</div>
            </div>
            <button class="btn btn-sm btn-primary">预约</button>
          </div>
        </div>
        <div class="class-slot">
          <div class="d-flex justify-content-between">
            <div>
              <strong>塑形普拉提</strong>
              <div class="text-muted small">10:30-11:30 · 李教练</div>
            </div>
            <button class="btn btn-sm btn-primary">预约</button>
          </div>
        </div>
      </div>

      <div class="schedule-day">
        <h6 class="text-primary">周二 · 5月16日</h6>
        <div class="class-slot">
          <div class="d-flex justify-content-between">
            <div>
              <strong>康复普拉提</strong>
              <div class="text-muted small">18:00-19:00 · 王教练</div>
            </div>
            <button class="btn btn-sm btn-primary">预约</button>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="month" role="tabpanel">
      <div class="text-center py-4">
        <h6>选择日期查看课程</h6>
        <div class="my-3">
          <button class="btn btn-outline-primary mx-1">5月</button>
          <button class="btn btn-outline-secondary mx-1">6月</button>
        </div>
        <div id="calendar" class="d-flex flex-wrap justify-content-center">
          <!-- 日历日期将通过JavaScript动态生成 -->
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="private" role="tabpanel">
      <div class="mb-3">
        <label class="form-label">选择教练</label>
        <select class="form-select">
          <option selected>所有教练</option>
          <option>张教练</option>
          <option>李教练</option>
          <option>王教练</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">选择日期</label>
        <input type="date" class="form-control">
      </div>
      <div class="mb-3">
        <label class="form-label">选择时间</label>
        <select class="form-select">
          <option selected>选择时间段</option>
          <option>09:00-10:00</option>
          <option>10:30-11:30</option>
          <option>14:00-15:00</option>
          <option>18:00-19:00</option>
        </select>
      </div>
      <button class="btn btn-primary w-100">提交预约申请</button>
    </div>
  </div>
</div>